<template>
  <div class="container">
    <div v-if="propTitleMode" class="title-container">
      <van-row style="width:100%">
        <van-col span="9"><div class="title">sn</div></van-col>
        <van-col span="6"><div class="title">效期</div></van-col>
        <van-col span="6"><div class="title">包装</div></van-col>
        <van-col span="3"><div class="title">确认</div></van-col>
      </van-row>
    </div>
    <div v-else class="item-container">
      <van-row style="width:100%;">
        <van-col span="9"><div class="sn">{{value.sn}}</div></van-col>
        <van-col span="6"><div class="exp">{{value.expDate | formatDate("yyyy-MM-dd")}}</div></van-col>
        <van-col span="6"><div class="qty">{{value.skuQty}} {{value.skuUnit}} / {{value.packageUnit}} </div></van-col>
        <van-col span="3"><div class="icon"><van-icon v-if="value.skuQty==value.scanedSkuQty" name="checked" /></div></van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    value: Object,
    propTitleMode: Boolean
  },
  created() {
  },
  computed: {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  $line-height:24px;
  .item-container {
    width:100%;
    background-color: white;
    color:#2f2f2f;
    border-top:1px solid #eeeeee;
  }
  .title-container {
    width:100%;
    background-color: white;
    color:#2f2f2f;
  }
  .title {
    text-align: center;
    font-size: 10px;
    color:gray;
  }
  .container div{
    height: 30px;
    line-height: 30px;
  }
  .lot,.exp {
    font-size: 12px;
  }
  .qty {
    text-align: right;
  }
  .sn {
    font-size: 12px;
    text-align: left;
  }
  .align-right {
    text-align: right;
  }
  .icon {
    text-align:center;
    color:green;
  }

</style>
